<template>
 <div id="back" style="background-color: red;" >
  <img v-if="!mine_info.username" src='https://img0.baidu.com/it/u=974141393,2336151801&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' alt="头像" style="width: 70px;height: 70px;border-radius: 50%;background-color: grey;" >
  <img v-else :src=mine_info.headerimg alt="头像" style="width: 70px;height: 70px;border-radius: 50%;background-color: grey;" @click="router.push({path:'/myinfo'})">
  <span  @click="router.push({path:'/myinfo'})">{{ mine_info.username }}</span>
  <span v-if="!mine_info.username">请登录</span>
 </div>
 <div id="payOrder" @click="router.push({path:'/oderlist'})">
  <span class="left">我的订单</span>
  <span class="right">查看全部订单<van-icon name="arrow" /></span>
 </div>

 <van-grid :column-num="5">
  <van-grid-item icon="peer-pay" text="待付款" />
  <van-grid-item icon="cluster-o" text="待发货" />
  <van-grid-item icon="send-gift-o" text="待收货" />
  <van-grid-item icon="orders-o" text="评价" />
  <van-grid-item icon="bill-o" text="退货/售后" />
</van-grid>
<van-grid :column-num="4">
  <van-grid-item icon="location" text="收货地" />
  <van-grid-item icon="bag-o" text="我的收货" />
  <van-grid-item icon="paid" text="优惠券" />
  <van-grid-item icon="shop" text="线下门店" />
  <van-grid-item icon="shop-o" text="商家入驻" />
  <van-grid-item icon="records" text="实名认证" />
  <van-grid-item icon="manager-o" text="官方客服" />
  <van-grid-item icon="setting-o" text="设置" />
</van-grid>
<van-button round type="warning" size="large" @click="exit()" v-if="mine_info.username">退出登录</van-button>
<van-button v-else round type="success" size="large" @click="exit(),router.replace({path:'/'})"  >登录账号</van-button>
</template>

<script lang='ts' setup>
import {useRouter} from 'vue-router'
import {useMine,} from '@/hooks/mine'
const {mine_info,exit,Eshow,Lshow} = useMine()
const router = useRouter()





</script>

<style scoped lang='scss'>
#back{
  width: 100%;
  height: 150px;
  overflow: hidden;
  img{
    margin-left: 25px;
    margin-top: 35px;
    float: left;
  }
  span{
    font-size: 25px;
    color: white;
   margin-left: 10px;
   float: left;
   margin-top: 50px;
  }
}
#payOrder{
  width: 100%;
  height: 40px;
  .left{
    margin-left: 5px;
    font-size: 20px;
    line-height: 40px;
  }
  .right{
    float: right;
    line-height: 40px;
    font-size: 20px;
  }
}
.van-button{
  margin-top: 20px;
}
</style>
